import { Button ,Modal} from 'antd';
import { WeaBrowser ,WeaLocaleProvider} from 'ecCom';
import { each } from 'lodash';
import { observer } from 'mobx-react';
import * as React from 'react';
import Divider from '../../common/divider'
import AddSelectOptionsDialog from '../../dialog/addSelectOptions';
import AddFixphareDialog from '../../dialog/addFixphareOptions';
import AddSelectTreeDialog from '../../dialog/addSelectTree';
import * as CommonAction from './action/common';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class QuickTable extends React.Component {
    browserInstance;
    workbookHost;
    browserInstanceVisible = false;
    constructor(props) {
        super(props);
        this.store = props.store;
        each({ ...CommonAction }, (value, key) => {
            if (typeof value === 'function') {
                this[key] = value.bind(this);
            } else {
                this[key] = value;
            }
        });
    }
    componentDidMount() {
        const { store } = this.props;
        if (this.workbookHost) {
            store.workbook = new GC.Spread.Sheets.Workbook(this.workbookHost);
        }
    }
    saveToImg = () => {
        const { store } = this.props;
        const url = store.workbook.getHost().querySelector("#vp_vp").toDataURL('png/image');
        Modal.info({
            width:1920,
            content:(
                <div>
                    <img height={500} width="auto" src={url}></img>
                </div>
            )
        })
    }
    render() {
        const { store } = this.props;
        return (
            <div className="edc-quick-table">
                <div className="edc-quick-table-head edc-workbook-tools">
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8kbwrl`} onClick={store.signFields} className="tool-btn tool-btn-large"><i className="icon-coms-Sign" />{getLabel('502301','识别字段') }</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ifgi7p`} onClick={this.saveToImg} className="tool-btn tool-btn-large"><i className="icon-coms-task-list" />{getLabel('502302','生成图片') }</Button>
                    <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@soqinr`} type="vertical" />
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0nfk3p`} onClick={store.addDetailTable} className="tool-btn tool-btn-large"><i className="icon-coms-task-list" />{getLabel('502303','添加明细') }</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1jt0ca`} onClick={store.clearContent} className="tool-btn tool-btn-large"><i className="icon-coms-Clear" />{getLabel('502304','清除内容') }</Button>
                    <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@o87ko9`} type="vertical" />
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@s5lo1z`} onClick={this.setInputTextField} className="tool-btn tool-btn-large" ><i className="icon-coms-text" />{getLabel('502305','文本') }</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@q0hqfd`} onClick={this.setInputIntField} className="tool-btn tool-btn-large"><i style={{ marginTop: -10, fontSize: 32, marginBottom: -2 }} >0</i>{getLabel('502306','整数') }</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@b7wkf9`} onClick={this.setInputFloatField} className="tool-btn tool-btn-large" ><i style={{ marginTop: -10, fontSize: 32, marginBottom: -2 }}>0.1</i>{getLabel('502307','浮点数') }</Button>
                    <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@srckgb`} type="vertical" />
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@lrxqs3`} onClick={this.setBrowserHrmField} className="tool-btn tool-btn-large" ><i className="icon-coms-HumanResources" />{getLabel('502300','人力资源') }</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vogyn9`} onClick={this.setBrowserDptField} className="tool-btn tool-btn-large" ><i className="icon-coms-Headquarters" />{getLabel('502298','部门') }</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vg3a11`} onClick={this.setBrowserSubCompanyField} className="tool-btn tool-btn-large" ><i className="icon-coms-LargeArea" />{getLabel('502299','分部') }</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xjmrud`} onClick={this.setBrowserDateField} className="tool-btn tool-btn-large" ><i className="icon-coms-New-schedule" />{getLabel('502297','日期') }</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@od4um5`} className="tool-btn tool-btn-large" onClick={this.showBrowserInstance}>
                        <i className="icon-coms-search" />
                        {getLabel('502308','浏览框') }
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@vnwmpm`} onChange={this.setBrowserField} style={{ display: 'none' }} ref={ref => this.browserInstance = ref} type="browserTypeList" />
                    </Button>
                    <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@zgtcun`} type="vertical" />
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@sp6cos`} onClick={this.setCheckField} className="tool-btn tool-btn-large" ><i className="icon-coms-batch" />{getLabel('502309','Check框') }</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@c6jn4r`} onClick={this.setSelectField} className="tool-btn tool-btn-large" ><i className="icon-coms-down" />{getLabel('502310','下拉框') }</Button>
                    <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@ke442y`} type="vertical" />
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3vx5sq`} onClick={this.expandCell} className="tool-btn tool-btn-large" ><i className="icon-coms-All-unfolding" />{getLabel('502311','扩展表格') }</Button>
                    <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@toy99v`} type="vertical" />
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zw759h`} onClick={this.save} className="tool-btn tool-btn-large" ><i className="icon-coms-Preservation" />{getLabel('502312','保存') }</Button>
                </div>
                <div className="edc-quick-table-content">
                    <div ref={ref => this.workbookHost = ref} style={{ height: '100%' }} />
                </div>
                <AddSelectOptionsDialog ecId={`${this && this.props && this.props.ecId || ''}_AddSelectOptionsDialog@8wcf1o`} store={store.addSelectOptionsStore} />
                <AddFixphareDialog ecId={`${this && this.props && this.props.ecId || ''}_AddFixphareDialog@0p8n8p`} store={store.addFixphareStore} />
                <AddSelectTreeDialog ecId={`${this && this.props && this.props.ecId || ''}_AddSelectTreeDialog@wmftad`} store={store.addSelectTreeStore} />
            </div>
        )
    }
    save = () => {
        const { store } = this.props;
        store.save();
    }
    expandCell = () => {
        const { store } = this.props;
        const sheet = store.workbook.getActiveSheet();
        sheet.setRowCount(sheet.getRowCount() + 10);
        sheet.setColumnCount(sheet.getColumnCount() + 10);
    }
}